<template>
  <div class="home_bottom">
    <div class="home_btns">
      <div class="btn_item" v-for="(item, index) in btns" :key="index" @click="btnClick(item.clientType, index)">
        <img :src="item.startImg">
      </div>
    </div>
    <div class="bottom_bj">
      <img src="@/assets/img/jxd.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btns: [
        {
          startImg: new URL('../../assets/img/qbyh.png', import.meta.url).href,
          activeImg: new URL('../../assets/img/qbyha.png', import.meta.url).href,
          clientType: 6
        },
        {
          startImg: new URL('../../assets/img/ycyhs.png', import.meta.url).href,
          activeImg: new URL('../../assets/img/ycyha.png', import.meta.url).href,
          clientType: 5
        },
        {
          startImg: new URL('../../assets/img/dbh.png', import.meta.url).href,
          activeImg: new URL('../../assets/img/dbha.png', import.meta.url).href,
          clientType: 0
        },
        {
          startImg: new URL('../../assets/img/sbz.png', import.meta.url).href,
          activeImg: new URL('../../assets/img/sbza.png', import.meta.url).href,
          clientType: 1
        },
        {
          startImg: new URL('../../assets/img/gglr.png', import.meta.url).href,
          activeImg: new URL('../../assets/img/gglra.png', import.meta.url).href,
          clientType: 2
        },
        {
          startImg: new URL('../../assets/img/kzf.png', import.meta.url).href,
          activeImg: new URL('../../assets/img/kzfa.png', import.meta.url).href,
          clientType: 3
        }
      ]
    }
  },
  methods: {
    btnClick(clientType, index) {
      this.$emit('btnClicks', clientType, index)
    }
  }
}
</script>

<style lang="scss" scoped>
.home_bottom {
  z-index: 100;
  width: 100%;
  height: 15%;
  display: flex;
  flex-direction: column;

  .home_btns {
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;

    .btn_item {
      width: 14%;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 100%;
        display: flex;
        cursor: pointer;
      }
    }
  }

  .bottom_bj {
    width: 100%;

    img {
      width: 100%;
      height: 1.2rem;
    }
  }
}
</style>